<template>
	<view class="m-mini-game cover-screen-position">
		<view class="top-btn flex-column-start-center" :style="{top:prayerBeadsTop+'rpx'}">
			<view class="btn-item flex-row-center-center" v-for="(item,index) in rightBtnList" :key="index"
				@click="handleBtnClick(item,index)">
				<image class="cover-img" :src="item.icon" mode="aspectFill"></image>
			</view>

		</view>
		<view class="top-avatar flex-row-start-center" :style="{'top':avatarTop+'rpx',height:avatarHeight+'rpx'}"
			@click.stop>
			<view class="avatar-box">
				<image class="avatar-img cover-img"
					src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a3939145c28c46cb9805572571c8efd6.jpg"
					mode="aspectFill"></image>
				<image class="avatar-border cover-img"
					src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/372504552f3a40fe91226a879324cead.png"
					mode="aspectFill"></image>
			</view>
			<view class="power-box flex-row-start-center">
				<image class="power-icon"
					src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/b5c1e3f186a647b9bc0781cf61f88d62.png"
					mode="aspectFill"></image>
				<text class="power-num">{{gameCount}}</text>
			</view>

		</view>

		<view class="fly-effect" :style="{top:flyTop+'rpx'}">
			<view class="fly-item" v-for="(item,index) in fishEffects" v-if="item.visible" :key="index">功德 +1
			</view>
		</view>

		<view class="wooden-fish cover-screen-position" v-if="gameType=='woodenFish'">
			<view class="fish-click-area">
				<view class="fish-click-content" :class="{'fish-click-scale':isClickFish}"
					@touchstart.stop="handleClickFish">
					<image class="cover-img"
						src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/abf9c0231f074b1b82c8f5a2a29fb154.png"
						mode="aspectFill"></image>
				</view>
			</view>
		</view>

		<view class="prayer-beads cover-screen-position flex-row-center-center" v-if="gameType=='prayerBeads'">
			<image class="game-bg" :src="actBgUrl" mode="aspectFill"></image>
			<view class="show-beads-box flex-row-center-center" :style="{top:prayerBeadsTop+'rpx'}"
				@touchstart.stop="handleBeadsTouchStart" @touchmove.stop="handleBeadsTouchMove"
				@touchend.stop="handleBeadsTouchEnd">
				<view class="beads-content">
					<!-- :style="{top:breadsTop+'%'}" -->
					<view class="beads-img-content" :style="{top:breadsTop+'rpx'}"
						:class="{'no-transition':isRestoreBeads}">
						<!-- 		<image class="beads-img-item beads-top-item" :src="prayerBeadsSrc" mode="aspectFill"></image>
						<image class="beads-img-item" :src="prayerBeadsSrc" mode="aspectFill"></image>
						<image class="beads-img-item beads-bottom-item" :src="prayerBeadsSrc" mode="aspectFill"></image> -->
						<view class="beads-img-item beads-top-item flex-column-between-center">
							<image class="beads-img-item-child" :src="actBreadClothes.image" mode="aspectFill"
								v-for="citem in 8"></image>
						</view>
						<view class="beads-img-item flex-column-between-center">
							<image class="beads-img-item-child" :src="actBreadClothes.image" mode="aspectFill"
								v-for="citem in 8"></image>
						</view>
						<view class="beads-img-item beads-bottom-item flex-column-between-center">
							<image class="beads-img-item-child" :src="actBreadClothes.image" mode="aspectFill"
								v-for="citem in 8"></image>
						</view>
					</view>
				</view>
			</view>

		</view>


		<view class="room-btn leave-btn" @click="handleGoBack" :class="{'room-btn-active':roomBtnClicked}">
			<view class="room-btn-content flex-row-center-end">
				<image class="room-btn-img"
					src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/e3db67de9d374592b31c305f2901e334.png"
					mode="aspectFill"></image>
				<view class="room-text">更多</view>
			</view>
			<view class="room-btn-line">
				<view class="room-btn-line-content"></view>
			</view>
			<image class="room-btn-fast-icon"
				src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5732440ddf8642799d477ef01a56a872.png"
				mode="aspectFill"></image>
		</view>

		<!-- 弹窗 -->
		<view class="mode-modal mini-game-modal" :class="{'no-bottom-tab':modalType=='set'}" v-if="showModel"
			@click="handleCloseModal">
			<view class="modal-content-box mode-modal-content flex-column-start-center" @click.stop>
				<view class="modal-title modal-transparent-title">
					<image class="image-title" :src="modalTitleImg" mode="aspectFill"></image>
					<view class="close-icon" @click="handleCloseModal">
						<image class="cover-img"
							src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/9cfc771011e642908073bd33850b419d.png"
							mode="aspectFill"></image>
					</view>
				</view>

				<view class="modal-content flex-column-start-center">
					<view class="sort-box modal-sort-box flex-column-start-center"
						v-if="modalType=='sort'&&(actTabType=='hour'||actTabType=='day'||actTabType=='week')">
						<view class="mode-modal-table-title flex-row-start-center">
							<view class="sort-number sort-title-font-style flex-row-center-center">排名</view>
							<view class="sort-user sort-title-font-style flex-row-center-center">玩家</view>
							<view class="sort-integral sort-title-font-style flex-row-center-center">功德</view>
							<view class="sort-bottom-line"></view>
						</view>

						<view class="dance-sort-scroll ">
							<scroll-view ref="dance-sort-scrollView" scroll-y class="scroll-content"
								:show-scrollbar="false" :scroll-with-animation="true">
								<view class="dance-sort-item item-bottom-line flex-row-start-center"
									v-for="(item,index) in tempSortData" :key="index">
									<view class="sort-number flex-row-center-center">
										<text class="sort-number-text" v-if="index>2">{{index+1}}</text>
										<image class="sort-icon" v-else :src="sortIconSrc(index)" mode="aspectFill">
										</image>
									</view>
									<!-- 舞力全开相关 -->
									<view class="lord-info  flex-row-center-center">
										<image class="avatar-img" v-if="item.avatar" :src="item.avatar"
											mode="aspectFill">
											<view class="lord-name-power flex-column-center-start">
												<view class="lord-name" v-if="item.userName">
													{{item.userName}}
												</view>
												<view class="dance-power flex-row-start-center">
													<image class="dance-power-icon"
														src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/02e7d5b29feb4260b1b142392de70690.png"
														mode="aspectFill"></image>
													{{item.dancePower}}
												</view>
											</view>
									</view>

									<view class="sort-integral flex-row-center-center">
										<text class="sort-integral-text">{{item.dancePower}}</text>
									</view>

									<view class="sort-item-bottom-line"></view>
								</view>
							</scroll-view>
						</view>

						<view class="user-dance-sort-item flex-row-start-center">
							<view class="sort-number flex-row-center-center">
								<text class="sort-number-text">未上榜</text>
							</view>
							<view class="lord-info  flex-row-center-center">
								<image class="avatar-img" v-if="userSortData.avatar" :src="userSortData.avatar"
									mode="aspectFill">
									<view class="lord-name-power flex-column-center-start">
										<view class="lord-name" v-if="userSortData.userName">
											{{userSortData.userName}}
										</view>
										<view class="dance-power flex-row-start-center">
											<image class="dance-power-icon"
												src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/02e7d5b29feb4260b1b142392de70690.png"
												mode="aspectFill"></image>
											{{userSortData.dancePower}}
										</view>
									</view>
							</view>
							<view class="sort-integral flex-row-center-center">
								<text class="sort-integral-text">{{userSortData.dancePower}}</text>
							</view>
						</view>
					</view>
					<view class="reward-box modal-reward-box flex-column-start-center"
						v-if="modalType=='sort'&&actTabType=='reward'">
						<view class="modal-top-switch flex-row-center-center">
							<view class="switch-tab-content flex-row-center-center">
								<view v-for="(item,index) in sortSwitchTabs" :key="index"
									@click="handleSwitchTabClick(item,index)"
									class="switch-tab-item flex-row-center-center"
									:class="{'act-switch-tab-item':actSwitchTab==item.type}">{{item.name}}
								</view>
							</view>
							<!-- <view class="switch-get-tip flex-row-center-end">
								<text v-if="actSwitchTab=='hour'">每日小时发放和刷新奖励</text>
								<text v-if="actSwitchTab=='day'">每日零点发放和刷新奖励</text>
								<text v-if="actSwitchTab=='week'">每周一零点发放和刷新奖励</text>
							</view> -->
						</view>
						<view class="modal-center-scroll-list reward-scroll-list">
							<scroll-view ref="pk-scrollView" scroll-y class="scroll-content" :show-scrollbar="false"
								:scroll-with-animation="true">
								<view class="mode-modal-scroll-item item-bottom-line flex-row-start-center"
									v-for="(item,index) in tempSortData" :key="index">
									<view class="reward-sort-name flex-row-center-center">
										<text class="sort-number-text" v-if="index>2">{{index+1}}</text>
										<image class="sort-icon" v-else :src="sortIconSrc(index)" mode="aspectFill">
										</image>
									</view>

									<view class="rewards-box dance-reward-rewards-box flex-row-start-center">
										<view class="reward-item" v-for="(ritem,rindex) in tempTimeRewardList"
											:key="rindex" :class="{
						  'green-good': ritem.RarityLevel == 1,
						  'orange-good': ritem.RarityLevel == 2,
						  'blue-good': ritem.RarityLevel == 3,
						  'purple-good': ritem.RarityLevel == 4,
						}">
											<image class="cover-img" :src="ritem.icon" mode="aspectFill"></image>
											<view class="reward-num">{{ ritem.num }}</view>
										</view>
									</view>

								</view>

							</scroll-view>
						</view>


						<view class="user-reward-sort-item flex-row-start-center">
							<view class="reward-sort-name flex-row-center-center">
								<text class="sort-number-text"
									v-if="rankUserTimeReward.sortNum>2">{{rankUserTimeReward.sortNum}}</text>
								<image class="sort-icon" v-else :src="sortIconSrc(rankUserTimeReward.sortNum-1)"
									mode="aspectFill">
								</image>
							</view>

							<view class="rewards-box dance-reward-rewards-box flex-row-start-center">
								<view class="reward-item" v-for="(ritem,rindex) in tempTimeRewardList" :key="rindex"
									:class="{
							  'green-good': ritem.RarityLevel == 1,
							  'orange-good': ritem.RarityLevel == 2,
							  'blue-good': ritem.RarityLevel == 3,
							  'purple-good': ritem.RarityLevel == 4,
							}">
									<image class="cover-img" :src="ritem.icon" mode="aspectFill"></image>
									<view class="reward-num">{{ ritem.num }}</view>
								</view>
							</view>

							<view class="user-reward-sort-btn flex-row-center-center">
								<view class="btn-box">
									<view class="btn-item">
										<view class="btn-content start-live-btn">领 取</view>
									</view>
								</view>
							</view>
						</view>



					</view>

					<view class="game-set-box flex-column-start-center">
						<view class="title-box">
							<view class="title-content">
								<view class="left-tip">
									<view class="tip-icon"></view>
									<view class="tip-text">皮肤设置</view>
								</view>
								<view class="right-content"></view>
							</view>
						</view>





						<view class="beads-clothes-box beads-clothes-bg-box">
							<scroll-view ref="beadsClothesScrollView" scroll-y class="scroll-content"
								:show-scrollbar="false" :scroll-with-animation="true">
								<view class="beads-clothes-content beads-clothes-bg-content flex-row-center-start">
									<view class="beads-clothes-list beads-clothes-bg-list flex-row-start-start">
										<view class="beads-clothes-bg-item good-after-before"
											v-for="(item,index) in beadsClothes" :key="index" :class="{
                          'green-good': item.RarityLevel == 1,
                          'orange-good': item.RarityLevel == 2,
                          'blue-good': item.RarityLevel == 3,
                          'purple-good': item.RarityLevel == 4,
						  'act-beads-bg-clothes':index ==actBreadClothesIndex
                        }" @click="handleSettingItemClick(item,index,'beadsClothes')">
											<image class="cover-img" :src="item.image" mode="aspectFill"></image>
											<view class="item-masker flex-row-center-center" v-if="item.locked">
												<image class="locked-icon"
													src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/acb0459908234cf3b311f42f917623e5.png"
													mode="aspectFill"></image>
											</view>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
						<view class="title-box">
							<view class="title-content">
								<view class="left-tip">
									<view class="tip-icon"></view>
									<view class="tip-text">背景设置</view>
								</view>
								<view class="right-content"></view>
							</view>
						</view>





						<view class="beads-clothes-bg-box game-bg-box">
							<view class="beads-clothes-bg-content flex-row-center-center">
								<view class="beads-clothes-bg-list">
									<scroll-view ref="gameBgScrollView" scroll-x class="scroll-content"
										style="white-space: nowrap" :show-scrollbar="false"
										:scroll-with-animation="true">
										<view class="game-bg-item" v-for="(item,index) in bgList" :key="index"
											:class="{'act-beads-bg-clothes':index == actBgIndex}"
											@click="handleSettingItemClick(item,index,'bg')">
											<image class="cover-img" :src="item" mode="aspectFill"></image>
										</view>
									</scroll-view>
								</view>

							</view>


						</view>


					</view>

				</view>
				<view class="bottom-mode-tab flex-row-start-center">
					<view class="tab-item flex-row-center-center"
						:class="{'act-tab-item':actTabType==item.type,'last-tab-item':index==tabs.length-1,'empty-tab':item.isEmpty}"
						v-for="(item,index) in tabs" :key="index" @click="handleModalTabItemClick(item,index)">
						{{item.name}}
					</view>
					<view class="modal-bottom-tab-line"></view>
				</view>
			</view>
			<view class="bottom-tip">
				<view class="left-point"></view>
				<view class="center-content">点击任意空白区域关闭</view>
				<view class="right-point"></view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		props: {
			paramsJson: {
				type: Object,
				default: () => {
					return {}
				},

			},
			storyId: {
				type: String,
				default: "",
			},
		},
		data() {
			return {
				gameType: "prayerBeads", // woodenFish木鱼 prayerBeads佛珠
				actTabType: "hour",
				actSwitchTab: "hour",
				modalType: "set", //sort 功德榜  set 设置
				jumpOutStoryId: "",
				actBgIndex: 0,
				actBreadClothesIndex: 0,
				showModel: true,
				roomBtnClicked: false,
				isRestoreBeads: false,
				isClickFish: false,
				isAuto: false,
				bgList: [
					"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/1fb28deeba324acdae340e4cf05e30bf.png",
					"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/0d96e89d70924de2a6e264055b51e038.png",
					"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2b66170756504f0baa3569d3015784cf.png",
					"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2b66170756504f0baa3569d3015784cf.png",
					"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2b66170756504f0baa3569d3015784cf.png",
					"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2b66170756504f0baa3569d3015784cf.png",
					"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2b66170756504f0baa3569d3015784cf.png",

				],
				beadsClothes: [{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/83bc008a799a414eb45e5acb2dfc263d.png",
						RarityLevel: 1,

					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/e90b9ecabdf4403bbef56caa056fd401.png",
						RarityLevel: 2
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/694d3da9c5f24974a66454506993f24b.png",
						RarityLevel: 3
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/fd97e879a6114ead8b88065e73e1a758.png",
						RarityLevel: 4
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7e041b6d4a874b66875247d1d0f62e68.png",
						RarityLevel: 2,
						locked: true
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/0bd00ccd5e304084a9fe35e62767b1c4.png",
						RarityLevel: 2,
						locked: true
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/65888fefe41945e6a3e5b7cde51556a1.png",
						RarityLevel: 3,
						locked: true
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/f5390ed5c2d142d29896fca1ef2777f1.png",
						RarityLevel: 4,
						locked: true
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/592e373ae0424218a5f374dad7bda512.png",
						RarityLevel: 3,
						locked: true
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/54ffcf5553254facb17d4b854d62bace.png",
						RarityLevel: 2,
						locked: true
					},
				],
				rankUserTimeReward: {
					sortNum: 100,
				},
				tempTimeRewardList: [{
						name: "金币",
						type: "prop",
						num: 3,
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/531cc17604ec435286166761419a50e2.png",
						RarityLevel: 4
					},
					{
						name: "以太币",
						type: "prop",
						num: 2000,
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/178967f2db9e4b21b9250c0c4ba950ad.png",
						RarityLevel: 3
					},
					{
						name: "以太币",
						type: "prop",
						num: 2000,
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/6035c864cda949ceaa64ec009d3fcdc9.png",
						RarityLevel: 2
					},

				],
				userSortData: {
					userName: "第一收割机",
					level: 30,
					dancePower: 777,


					avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/00207b5448134a3e851925c885076eda.jpg",
					honer: "新星总裁10阶",
					honerLevel: 3,
					tName: "沈阳",
					defenseTimes: 1,
					tLevel: "一级"
				},
				sortIconList: [
					"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ddd87efc45494316a7ef10612b4aac1b.png",
					"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d16850e51b384f81b06d0f4311d77f25.png",
					"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d7548cc3949446e4ac0820e0242f6059.png",
				],
				sortSwitchTabs: [{
						name: "小时榜",
						type: 'hour'
					},
					{
						name: "日榜",
						type: 'day'
					},
					{
						name: "周榜",
						type: 'week'
					},
				],
				sortTabs: [{
						name: "小时榜",
						type: 'hour',
						isEmpty: false
					},
					{
						name: "日榜",
						type: 'day',
						isEmpty: false
					},
					{
						name: "周榜",
						type: 'week',
						isEmpty: false
					},
					{
						name: "奖励",
						type: 'reward',
						isEmpty: false
					},

				],

				rightBtnList: [{
						name: "排名",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/df308f412ddf4499974847a7707252a6.png",
						type: "sort"
					},
					{
						name: "自动",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d3cabab62a9741b396335bc76e08f258.png",
						type: "auto"
					},

					{
						name: "设置",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/816cad2bbecb401ba0e3063fea2b7fcd.png",
						type: "set"
					},
				],


				tempSortData: [{
						userName: "西门大官人",
						level: 30,
						dancePower: 993,


						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8e8d014dcfce4e85bee7fe6d5911ca0a.jpg",
						honer: "新星总裁10阶",
						honerLevel: 6,
						tName: "北京",
						defenseTimes: 11,
					},
					{
						userName: "二号玩家",
						level: 30,
						dancePower: 992,


						avatar: "https://cdn.osisx.com/MEMBER/1751587426788548608//1f0da7d80eea4d58bfda51ee8012900c.jpg",
						honer: "新星总裁10阶",
						honerLevel: 6,
						tName: "上海",
						defenseTimes: 10,
					},
					{
						userName: "三号玩家",
						level: 30,
						dancePower: 991,


						avatar: "https://cdn.osisx.com/MEMBER/1751587426788548608//432d50b16c1b4ec7845c31ebb31d1331.jpg",
						honer: "新星总裁10阶",
						honerLevel: 6,
						tName: "广州",
						defenseTimes: 9,
					},
					{
						userName: "四号玩家",
						level: 30,
						dancePower: 991,


						avatar: "https://cdn.osisx.com/game/image/8f55e1de60aa46f881aeaab72dac1c1d.png",
						honer: "新星总裁10阶",
						honerLevel: 5,
						tName: "重庆",
						defenseTimes: 8,
					},
					{
						userName: "五号玩家",
						level: 30,
						dancePower: 991,


						avatar: "https://cdn.osisx.com/game/image/90865d05e47447ce9d17fc0074e79be6.png",
						honer: "新星总裁10阶",
						honerLevel: 5,
						tName: "台北",
						defenseTimes: 7,
					},
					{
						userName: "六号玩家",
						level: 30,
						dancePower: 991,


						avatar: "https://cdn.osisx.com/game/image/62330d28cdd44003bc5665f9afb4af3b.jpg",
						honer: "新星总裁10阶",
						honerLevel: 5,
						tName: "南京",
						defenseTimes: 8,
					},
					{
						userName: "七号玩家",
						level: 30,
						dancePower: 991,


						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/adfafcd24d0347fcb7fce7042ac60e40.jpg",
						honer: "新星总裁10阶",
						honerLevel: 4,
						tName: "天津",
						defenseTimes: 8,
					},
					{
						userName: "八号玩家",
						level: 30,
						dancePower: 991,


						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/adfafcd24d0347fcb7fce7042ac60e40.jpg",
						honer: "新星总裁10阶",
						honerLevel: 4,
						tName: "杭州",
						defenseTimes: 9,
					},
					{
						userName: "九号玩家",
						level: 30,
						dancePower: 991,


						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/adfafcd24d0347fcb7fce7042ac60e40.jpg",
						honer: "新星总裁10阶",
						honerLevel: 4,
						tName: "贵阳",
						defenseTimes: 11,
					},
					{
						userName: "十号玩家",
						level: 30,
						dancePower: 991,


						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/adfafcd24d0347fcb7fce7042ac60e40.jpg",
						honer: "新星总裁10阶",
						honerLevel: 3,
						tName: "昆明",
						defenseTimes: 10,
					},
					{
						userName: "十一号玩家家",
						level: 30,
						dancePower: 991,


						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/adfafcd24d0347fcb7fce7042ac60e40.jpg",
						honer: "新星总裁10阶",
						honerLevel: 3,
						tName: "石家庄",
						defenseTimes: 10,
					},
					{
						userName: "十一号玩家家家",
						level: 30,
						dancePower: 991,


						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/adfafcd24d0347fcb7fce7042ac60e40.jpg",
						honer: "新星总裁10阶",
						honerLevel: 3,
						tName: "郑州",
						defenseTimes: 11,
					},
					{
						userName: "十一号玩家家家",
						level: 30,
						dancePower: 991,


						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/adfafcd24d0347fcb7fce7042ac60e40.jpg",
						honer: "新星总裁10阶",
						honerLevel: 3,
						tName: "太原",
						defenseTimes: 9,
					}
				],

				idCounter: 0,
				fishTimeOut: 1000,
				fishEffects: [],
				removalQueue: [],
				audioContext: null,
				fishClickVoice: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/audio/def68224f6684b7da6ae73e753ea9557.MP3",
				beadsClickVoice: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/audio/bc7ede091d1b43a2ad23d14ca3f5f32b.MP3",
				gameCount: 0,
				screenWidth: 375,
				gameTitleTop: 100,
				avatarTop: 80,

				// 佛珠

				breadsTop: 0,
				breadsTimeoutId: null,
				noTransitionTimeOutId: null,
				prayerBeadsSrc: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/0a6f98c654b9467bbdb81e7faf398b38.png",
				startY: 0, // 触摸开始的 Y 坐标
				endY: 0,
				direction: "",
				flyTop: 200,
				avatarHeight: 70,
				prayerBeadsTop: 200,
				actBreadClothes: {
					image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/83bc008a799a414eb45e5acb2dfc263d.png",
					RarityLevel: 1,
				},
				actBgUrl: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/1fb28deeba324acdae340e4cf05e30bf.png"

			}
		},
		computed: {
			...mapState(["curStoryId"]),
			modalTitleImg() {
				let modalType = this.modalType
				switch (modalType) {
					case 'sort':
						return "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/83f2013070024da78a4ff93ac0ff2ddb.png"
						break;
					case 'set':
						return "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7fc866d3ea8d435598c2b011aca197a2.png"
						break;
					default:
						break;
				}
			},
			tabs() {
				let modalType = this.modalType
				switch (modalType) {
					case 'sort':
						return this.sortTabs
						break;
						// case 'set':
						// 	return this.setTabs
						// 	break;

					default:
						break;
				}
			}
		},
		watch: {
			curStoryId: {
				handler(newVal, oldVal) {
					if (this.storyId && this.storyId != newVal) {
						this.handleCancelAuto()
					}
				},
				deep: true,
				immediate: true,
			},
		},
		beforeDestroy() {
			this.handleCancelAuto()
		},
		mounted() {
			this.getProps()
			try {
				let screenWidth = uni.getStorageSync('screenWidth')
				if (screenWidth) {
					this.screenWidth = screenWidth
				} else {
					this.screenWidth = uni.getSystemInfoSync().screenWidth; // 当前设备屏幕宽度
					uni.setStorageSync("screenWidth", this.screenWidth)
				}
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				let {
					top,
					height
				} = menuButtonInfo
				let pxTitleTop = top + height / 2
				this.gameTitleTop = this.pxToRpx(pxTitleTop)
				this.avatarTop = this.pxToRpx(top)
				this.flyTop = this.avatarTop + 90
				this.avatarHeight = this.pxToRpx(height)
				this.prayerBeadsTop = this.pxToRpx(height + top + 50)
			} catch (error) {}




		},
		methods: {

			getProps() {
				let paramsJson = this.paramsJson
				this.jumpOutStoryId = paramsJson.jumpOutStoryId && paramsJson.jumpOutStoryId.default ? paramsJson
					.jumpOutStoryId.default :
					this
					.jumpOutStoryId
				this.gameType = paramsJson.gameType && paramsJson.gameType.default ? paramsJson
					.gameType.default :
					this
					.gameType
			},
			handleSettingItemClick(item, index, type) {
				if (item.locked) {
					return
				}

				if (type == 'beadsClothes') {
					this.actBreadClothesIndex = index
					this.actBreadClothes = item
				} else if (type == 'bg') {
					this.actBgIndex = index
					this.actBgUrl = item
				}


			},


			sortIconSrc(index) {
				return this.sortIconList[index];
			},

			handleSwitchTabClick(item, index) {
				this.actSwitchTab = item.type
			},
			handleModalTabItemClick(item, index) {
				this.actTabType = item.type
			},
			handleOpenModal(type) {
				this.modalType = type
				this.showModel = true
				if (type == 'sort') {
					this.actTabType = 'hour'
				}
			},
			handleCloseModal() {
				this.showModel = false
			},
			handleGoBack() {
				this.roomBtnClicked = true
				setTimeout(() => {
					this.roomBtnClicked = false
				}, 500)
				console.log("跳转id", this.jumpOutStoryId);
				if (this.jumpOutStoryId) {
					this.$emit("getGameResult", String(this.jumpOutStoryId))
				}
			},
			handleCancelAuto() {
				this.direction = ''
				clearInterval(this.auotoInterValId)
			},
			handleAuto() {
				if (this.gameType == 'woodenFish') {
					this.auotoInterValId = setInterval(() => {
						this.handleClickFish('auto')
					}, 200)
				} else if (this.gameType == 'prayerBeads') {
					this.auotoInterValId = setInterval(() => {
						this.direction = 'down'
						this.handleBreadsClick('auto')
					}, 500)
				}
			},

			handleBtnClick(item, index) {
				switch (item.type) {
					case 'auto':
						this.isAuto = !this.isAuto
						if (this.isAuto) {
							item.icon =
								"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/f4a8522bcd5f402787af6c38f8690fa1.png"
							this.handleAuto()
						} else {
							item.icon =
								"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d3cabab62a9741b396335bc76e08f258.png"
							this.handleCancelAuto()
						}
						break;
					case "sort":
						this.handleOpenModal(item.type)
						break;
					case "set":
						this.handleOpenModal(item.type)
						break;
					default:
						break;
				}

			},
			handleBeadsTouchStart(e) {
				this.startY = e.touches[0].clientY;
			},
			handleBeadsTouchMove(e) {
				this.endY = e.touches[0].clientY;
				const deltaY = this.endY - this.startY;
				if (deltaY > 0) {
					this.direction = 'down'
				} else if (deltaY < 0) {
					this.direction = 'up'
				} else {
					this.direction = ''
				}

			},
			handleBeadsTouchEnd(e) {
				if (this.direction == 'down') {
					this.handleBreadsClick()
				} else if (this.direction == 'up') {
					this.handleBreadsClick()
				}
				this.endY = 0
				this.startY = 0
			},
			handleBreadsClick(type) {
				if (this.isAuto && type != 'auto') {
					return
				}


				if (this.breadsTimeoutId || this.noTransitionTimeOutId) {
					return
				}
				if (this.direction == 'down') {
					this.breadsTop = this.breadsTop + 150
				} else if (this.direction == 'up') {
					this.breadsTop = this.breadsTop - 150
				}
				if ((this.breadsTop >= 1035 && this.direction == 'down') || ((this.breadsTop <= -1035 && this.direction ==
						'up'))) {
					this.breadsTimeoutId = setTimeout(() => {
						this.isRestoreBeads = true
					}, 100)
					setTimeout(() => {
						this.breadsTop = 0
					}, 120)
					this.noTransitionTimeOutId = setTimeout(() => {
						this.isRestoreBeads = false
						clearTimeout(this.breadsTimeoutId)
						this.breadsTimeoutId = null
						this.noTransitionTimeOutId = null
					}, 150)
				}

				this.gameCount++

				this.direction = ""
				this.handlePlayVoice()
				this.handleStartFly()


			},
			pxToRpx(px) {
				const designWidth = 750; // 设计稿宽度
				const rpx = (designWidth / this.screenWidth) * px; // 根据屏幕宽度计算 rpx
				return rpx;
			},
			initAudio() {
				return new Promise((resolve, reject) => {
					this.audioContext = uni.createInnerAudioContext()
					if (this.gameType == 'woodenFish') {
						this.audioContext.src = this.fishClickVoice
					} else if (this.gameType == 'prayerBeads') {
						this.audioContext.src = this.beadsClickVoice
					}
					resolve(true)
				})
			},
			handlePlayVoice() {
				if (this.audioContext) {
					this.audioContext.stop()
					this.audioContext.play()
				} else {
					this.initAudio().then(res => {
						this.audioContext.play()
					})
				}
			},
			handleClickFish(type) {
				if (this.isAuto && type != 'auto') {
					return
				}


				this.isClickFish = true
				this.handleStartFly()
				this.handlePlayVoice()
				this.gameCount++
				setTimeout(() => {
					this.isClickFish = false
				}, 50)
			},

			handleStartFly() {
				let obj = {
					id: this.idCounter++,
					visible: true
				}
				this.fishEffects.push(obj)
				setTimeout(() => {
					this.handleRemoveEffect(obj.id)
				}, this.fishTimeOut);
			},

			handleRemoveEffect(effectId) {
				// 找到对应的特效并设置为不可见
				const effect = this.fishEffects.find(e => e.id === effectId);
				if (effect) {
					this.removalQueue.push(effectId); // 将要移除的特效 ID 加入队列
					this.processRemovalQueue(); // 处理移除队列
				}
			},
			processRemovalQueue() {
				// 如果没有待移除特效，结束处理
				if (this.removalQueue.length === 0) return;
				const effectId = this.removalQueue[0]; // 获取队列中的第一个特效 ID
				const index = this.fishEffects.findIndex(e => e.id === effectId);
				if (index !== -1) {
					this.fishEffects.visible = false
				}
				this.removalQueue.shift(); // 移除队列中的第一个元素
				this.processRemovalQueue(); // 递归处理下一个
			},
		}
	}
</script>

<style lang="scss" scoped>
	.m-mini-game {


		.leave-btn {
			bottom: 200rpx;
		}

		.top-avatar {
			position: absolute;
			left: 20rpx;
			height: 50rpx;
			width: 220rpx;
			z-index: 9;
			border-radius: 35rpx;
			box-sizing: border-box;
			padding-left: 70rpx;
			box-shadow: inset 0rpx 0rpx 4rpx rgba(255, 255, 255, .8);

			.power-box {
				width: 100%;
				height: 100%;
				margin-left: 15rpx;

				.power-icon {
					width: 60rpx;
					height: 30rpx;
					margin-right: 10rpx;
					vertical-align: middle;
				}

				.power-num {
					font-size: 24rpx;
					line-height: 24rpx;
					color: #fff;
				}
			}



			.avatar-box {
				position: absolute;
				left: 0rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
				box-sizing: border-box;

				.avatar-img {
					border-radius: 50%;
				}

				.avatar-border {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					width: 100rpx;
					height: 100rpx;
					z-index: 9;
				}
			}

		}

		.prayer-beads {
			position: relative;
			background-color: #000;



			.show-beads-box {
				position: absolute;
				width: 100%;
				height: 1200rpx;
				overflow: hidden;
				z-index: 9;

				.beads-content {
					position: relative;
					width: 200rpx;
					height: 1200rpx;
				}

				.beads-img-content {
					position: absolute;
					left: 0rpx;
					top: 0rpx;
					width: 100%;
					height: 1200rpx;
					transition: top 0.1s;
					z-index: 1;
					opacity: 1;

					.beads-img-item {
						width: 100%;
						height: 1200rpx;
						overflow: hidden;

						.beads-img-item-child {
							width: 150rpx;
							// height: 150rpx;
							height: 12.5%;
						}
					}

					.beads-top-item {
						position: absolute;
						left: 0rpx;
						top: -1200rpx;
					}

					.beads-bottom-item {
						position: absolute;
						left: 0rpx;
						bottom: -1200rpx;
					}
				}

				.no-transition {
					transition: none;
				}
			}
		}

		.wooden-fish {
			position: relative;
			background-color: #000;


			.fish-click-area {
				position: absolute;
				left: 50%;
				bottom: 300rpx;
				transform: translateX(-50%);
				width: 500rpx;
				height: 500rpx;
				z-index: 9;



				.fish-click-content {
					width: 100%;
					height: 100%;
					transition: all 0.05s ease;
				}

				.fish-click-scale {
					transform: scale(0.9);
				}
			}


		}

		.game-bg {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 100%;
			height: 100%;
			z-index: 1;
		}

		.fly-effect {
			position: absolute;
			left: 50rpx;
			width: 200rpx;
			height: 200rpx;
			z-index: 999;

			.fly-item {
				position: absolute;
				left: 0rpx;
				bottom: 0rpx;
				width: 100%;
				font-size: 30rpx;
				line-height: 30rpx;
				text-align: center;
				color: #fff;
				animation: fishFlyAni 1s linear forwards;
			}

			@keyframes fishFlyAni {
				0% {
					opacity: 1;
					bottom: 0%;
				}

				100% {
					opacity: 0;
					bottom: 100%;
				}
			}
		}

		.top-btn {
			position: absolute;
			right: 30rpx;
			top: 250rpx;
			z-index: 99;

			.btn-item {
				position: relative;
				width: 50rpx;
				height: 50rpx;
				margin-bottom: 40rpx;
				pointer-events: fill;
				border-radius: 50%;
			}
		}


		.mini-game-modal {
			z-index: 100;
			animation: modalShowAni 0.3s linear;

			.modal-content {}

			.game-set-box {
				width: 100%;
				height: 100%;

				.beads-clothes-bg-box {
					width: 100%;
					height: 350rpx;

					.beads-clothes-bg-content {
						width: 100%;
						box-sizing: border-box;
						padding-top: 20rpx;
					}

					.beads-clothes-bg-list {
						width: 580rpx;
						box-sizing: border-box;
						flex-wrap: wrap;

						.beads-clothes-bg-item {
							position: relative;
							width: 130rpx;
							height: 130rpx;
							margin-right: 20rpx;
							margin-bottom: 20rpx;
							box-sizing: border-box;
							background-color: rgba(255, 255, 255, 0.3);
							box-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, 0.1);
							padding: 10rpx;

							&:nth-child(4n) {
								margin-right: 0rpx;
							}

						}

						.act-beads-bg-clothes {
							border: 4rpx solid #fff;
						}
					}

				}

				.game-bg-box {
					width: 100%;
					height: 250rpx;

					.game-bg-item {
						display: inline-block;
						width: 100rpx;
						height: 200rpx;
						padding: 0rpx;
						border-radius: 6rpx;
						overflow: hidden;
						margin-right: 20rpx;
					}


				}
			}

			.sort-box {
				position: relative;
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				padding: 0rpx 20rpx;

				.lord-info {
					.dance-power-icon {
						margin-right: 10rpx !important;
					}
				}


			}

			.reward-box {
				position: relative;
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				padding: 0rpx 20rpx;



				.modal-top-switch {
					// height: 100rpx;

					.switch-tab-content {
						width: 300rpx;

					}

					// .switch-get-tip {
					// 	pointer-events: none;
					// 	top: none !important;
					// 	right: none;
					// 	left: 50%;
					// 	bottom: 0rpx;
					// 	transform: translate(-50%, 0%);
					// }
				}
			}
		}

		.no-bottom-tab {
			.mode-modal-content {
				padding-bottom: 10rpx;
			}
		}

		@keyframes modalShowAni {
			0% {
				transform: scale(1.1);
				opacity: 0.6;
			}

			100% {
				transform: scale(1);
				opacity: 1;
			}
		}


	}

	.item-masker {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 99;

		.locked-icon {
			width: 30rpx;
			height: 30rpx;
		}
	}
</style>